import CanvasAnimate from '@/utils/canvas.js'

export default () => {
  const canvasEl = reactive({
    width: 0,
    height: 0,
  })
  async function initCanvasAnimate(rootRef: Ref<HTMLElement>) {
    const { width, height } = rootRef.value?.getBoundingClientRect() as DOMRect
    canvasEl.width = width
    canvasEl.height = height
    await nextTick()
    const root = document.querySelector('#root')
    const cvs = new CanvasAnimate(root, {
      length: 35,
      clicked: true,
      moveon: false,
      RoundColor: '#fff',
    })
    cvs.Run()
  }

  return {
    canvasEl,
    initCanvasAnimate,
  }
}
